@use "@fox/styles/abstracts" as fox;

.form {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  gap: fox.gap(6);
}

.section {
  inline-size: 100%;
}

// 기획 BO-MAL-002의 한 줄 — 칸 폭은 시안 실측(400 / 280 / 160 / 520 / 680)을 따르되 고정하지
// 않고 기준 폭으로 두어 창이 좁으면 접는다. 토큰 스케일 밖의 값이라 리터럴로 둔다.
.grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: fox.gap(4);
  inline-size: 100%;

  & + & {
    margin-block-start: fox.gap(5);
  }
}

.field {
  display: flex;
  flex: 1 1 28rem;
  min-inline-size: 0;
  flex-direction: column;
  gap: fox.gap(2);
}

.fieldWide {
  display: flex;
  flex: 2 1 40rem;
  min-inline-size: 0;
  flex-direction: column;
  gap: fox.gap(2);
}

.fieldNarrow {
  display: flex;
  flex: 0 1 18rem;
  min-inline-size: 0;
  flex-direction: column;
  gap: fox.gap(2);
}